<template>
    <div>
        <a-modal :title="form.id ? '编辑' : '新增'" v-model:visible="visible" :width="600" okText="保存" @ok="handleSave" @cancel="handleCancel">
            <a-form layout="inline" ref="ruleFormRef" :model="form" :rules="rules">
                <a-row>
                    <a-col :span="20">
                        <a-form-item label="父节点" :span="24" name="parentName"> {{ form.parentName }} </a-form-item>
                    </a-col>
                    <a-col :span="20" v-if="form.id">
                        <a-form-item label="ID" :span="24" name="id" disabled>
                            {{ form.id }}
                        </a-form-item>
                    </a-col>
                    <a-col :span="20">
                        <a-form-item label="名称" :span="24" name="nodeName">
                            <a-input v-model:value="form.nodeName" />
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
        </a-modal>
    </div>
</template>

<script lang="ts">
import api from '@/api';
import { message } from 'ant-design-vue/es';
import { defineComponent, reactive, ref, unref, toRefs } from 'vue';
export default defineComponent({
    emits: ['success'],
    setup(_, { emit }) {
        const rules = {
            nodeName: [{ required: true, message: '节点名称不能为空' }]
        };
        const ruleFormRef = ref<any>();
        const state = reactive<any>({
            form: {
                id: '',
                parentId: '',
                parentName: '',
                catalogCode: '',
                nodeName: '',
                nodeOrder: null
            },
            visible: false
        });
        const open = (query) => {
            // 重置
            state.form = {
                id: '',
                parentId: '',
                parentName: '',
                catalogCode: '',
                nodeName: '',
                nodeOrder: null
            };
            state.form = {
                ...state.form,
                ...query
            };
            state.visible = true;
        };
        const handleSave = async () => {
            const { parentName, ...query } = state.form;
            unref(ruleFormRef)
                .validate()
                .then(async () => {
                    const { success } = await api.texingTreeModel.save(query);
                    if (success) {
                        message.success('操作成功');
                        emit('success');
                    }
                    state.visible = false;
                })
                .catch((err) => {
                    console.log(err);
                });
        };
        const handleCancel = () => {
            state.visible = false;
        };
        return {
            rules,
            ruleFormRef,
            ...toRefs(state),
            open,
            handleSave,
            handleCancel
        };
    }
});
</script>

<style scoped>
</style>